.tw-libpoppane {
  height: 0 !important;
}

.tw-previewbody.xdesign .tw-libpoppane {
  width: 300px;
  height: 300px !important;
  text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px dotted #333;

  &:after {
    content: "请将弹出面板中的内容拖入此处，拖入的节点请设置为相对布局模式";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }
}
.tw-absult-pic {
  position: absolute;

  img {
    position: absolute;
  }

  .xinner {
    // padding: 15px;
    animation: picrotate 0.5s linear ;
  }
  .xouter {
    animation: rotatereverse 0.5s linear ;
  }
  .xborder {
    height: 100px;
    width: 3px;
    border-right: 3px dashed #07ffff;
    background: linear-gradient(to bottom, #07ffff, #cd0000);
    background-origin: border-box;
  }
  @supports (-webkit-mask: none) or (mask: none) {
  .xborder {
      border: none;
      background: linear-gradient(to bottom, #07ffff, #07ffff22) no-repeat;
      -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px), linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px);
      -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
      -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;
      -webkit-mask-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px;
    }
  }
}
.tw-absult-pic.xanimate {
  animation: noanimate 1.5s ease-in, picpadding 1s linear 1s infinite;
  &:hover {
    animation-play-state: paused;
  }
}
.tw-pic-image {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 145px;
}
.tw-pic-border {
  width: 145px;
  height: 50px;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pics-enter-active {
  animation: bounce-in 0.3s linear;
}
.pics-leave-active {
  animation: bounce-in 0.3s linear reverse;
}
.poppers-enter-active {
  animation: poppers-in 0.3s linear;
}
.poppers-leave-active {
  animation: poppers-in 0.3s linear reverse;
}
@keyframes poppers-in {
  0% {
    transform-origin: 0% 0%;
    transform: scale(0);
  }
  50% {
    transform-origin: 0% 0%;
    transform: scale(0.5);
  }
  100% {
    transform-origin: 0% 0%;
    transform: scale(1);
  }
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes picpadding {
  0% { padding-top: 50px; }
  50% { padding-top: 13px; }
  100% { padding-top: 50px; }
}
@keyframes noanimate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes picrotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@keyframes rotatereverse {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-180deg); }
  100% { transform: rotate(-360deg); }
}
